<template>
    <div>
<!--        这是轮播图区域-->
        <swiper :lunbotuList="lunbotuList" :is-full="true"></swiper>

<!--        图标-->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for="item in tuBiao" :key="item.name"><router-link :to="item.router">
                <img :src="item.tuBiao" alt="">
                <div class="mui-media-body">{{item.name}}</div></router-link></li>
        </ul>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    import swiper from "./subcomponents/swiper.vue";
    export default {
        name: "homeContainer",
        data(){
            return {
                lunbotuList : [], //保存轮播图的数组
                tuBiao : [],
            };
        },
        created() {
            this.getLunbotu();
            this.getTuBiao();

        },
        methods : {
            getLunbotu(){//获取轮播图数据的方法
                this.axios.get("http://192.168.1.8:8899/src/data.json").then( resp => {
                    if(resp.status === 200){
                        //成功了
                        this.lunbotuList = resp.data.img;
                    }else{
                        //失败
                        Toast({
                            message: '加载图片失败',
                            duration: 2000,
                            iconClass : 'mui-icon mui-icon-closeempty',
                        });
                    }
                })
            },
            getTuBiao(){//获取图标
                this.axios.get("http://192.168.1.8:8899/src/tuBiao.json").then(resp => {
                    if(resp.status === 200){
                        //成功了
                        this.tuBiao = resp.data;
                    }
                })
            }
        },
        components : {
            swiper
        }
    }
</script>

<style scoped lang="scss">
    .mui-grid-view, .mui-grid-9{
        background-color: #fff;
        border: none;
        img{
            wiedth : 60px;
            height: 60px;
        }
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border: 0;
    }
    .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
        font-size: .7em;
    }
</style>